import Taro from "@tarojs/taro"
import { View, Text } from "@tarojs/components"
import XLoadMore from '../../../components/XLoadMore'
import { useRef, useState } from "react"


import './index.scss'
import { chargeLogApi } from '../../../services/ChargeLog'
import { parseTime } from "../../../utils"


export default() => {
    let loadMoreRef = useRef(null)
    let [logList, setLogList] = useState<ChargeOrder[]>([])

    function goTo(row:ChargeOrder) {
        const url = row.status == 1 ? '/userClient/pages/charging/index' : '/userClient/pages/chargeLog/detail/index'
        Taro.navigateTo({
            url : url + '?orderId=' + row.orderId
        })
    }

    function loadChargeLog(rows:ChargeOrder[]) {
        rows.forEach(row => {
            logList.push(row)
        })
        
        setLogList([...logList])
    }



    return (
        <View className='page'>
            <View className='p-l-r'>
                {
                    logList.map(log => <View className='log-item' onClick={() => { goTo(log) }}>
                        <View>设备号：<Text user-select>{log.deviceId}</Text></View>
                        <View className='m-t-6'>订单号：<Text user-select>{log.orderNo}</Text></View>
                        <View className='m-t-6'>下单时间：{parseTime(log.createTime)}</View>
                        {(log.status == 2 || log.status == 3) &&
                            <>
                                <View className='m-t-6'>结束时间：{parseTime(log.endTime)}</View>
                                <View className='m-t-6'>实付款：<Text className='color-bd1c1c'>{log.consumeAmount}元</Text></View>
                            </>
                        }
                    </View>)
                }
            </View>
            <View className='p-l-r'>
                <XLoadMore keyName='orderId' ref={loadMoreRef} onClick={chargeLogApi} onFinish={loadChargeLog}></XLoadMore>
            </View>
        </View>
    )
}